{extend name="../common/base"/}

<!-- 主体-->
{block name="body"}
<div class="body-table" style="margin-bottom:0;">
    <div class="layui-form-bar">
        <button class="layui-btn layui-btn-normal layui-btn-sm add-menu">+ 添加菜单</button>
    </div>
    <div>
        <table class="layui-hide" id="treeTable" lay-filter="treeTable"></table>
    </div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    var ptable = null, treeGrid = null,rightpage=null, layer = null, tableId = "treeTable";
    function init(layui) {
        treeGrid = layui.treeGrid;
        rightpage = layui.rightpage;
        layer = layui.layer;
        ptable = treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , idField: 'id'
            , url: "/home/menu/index"
            , cellMinWidth: 100
            , treeId: 'id'//树形id字段名称
            , treeUpId: 'pid'//树形父id字段名称
            , treeShowName: 'title'//以树形式显示的字段
            , height: 'full-0'
            , cols: [[
                { field: 'sort', width: 80, title: '排序', align: 'center' }
                , { field: 'id', width: 80, title: 'ID号', align: 'center' }
                , { field: 'title', width: 240, title: '菜单名称'}
                , { field: 'icon', width: 180, title: '图标class'}
                , { field: 'src', title: '菜单路径'}
                , { width: 160, title: '操作', align: 'center', templet: function (d) {
                        var html = '<span class="layui-btn-group"><button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">添加子菜单</button><button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></span>';
                        return html;
                    }
                }
            ]]
            , page: false
            //,skin:'line'
        });

        //表头工具栏事件
        $('.add-menu').on('click',function(){
            rightpage.open("../menu/add");
            return;
        });

        //操作按钮
        treeGrid.on('tool(' + tableId + ')', function (obj) {
            if (obj.event === 'add') {
                rightpage.open('/home/menu/add?pid='+obj.data.id);
                return;
            }

            if (obj.event === 'edit') {
                $menu = obj.data.id;
                rightpage.open('/home/menu/add?id='+$menu);
                return;
            }

            if (obj.event === 'del') {
                layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
                    $.ajax({
                        url: "../menu/delete",
                        type: 'post',
                        data: { id: obj.data.id },
                        success: function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) {
                                obj.del();
                            }
                        }
                    })
                    layer.close(index);
                });
            }
        });

    }
</script>
{include file="../common/layui" base="base" extend="['treeGrid','rightpage']" callback="init" /}
{/block}
<!-- /脚本 -->





<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--    <title>管理员列表 - 后台管理系统</title>-->
<!--    <meta name="renderer" content="webkit">-->
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
<!--    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css" media="all">-->
<!--    <script type="text/javascript" src="../static/layui/layui.js"></script>-->
<!--    <style type="text/css">-->
<!--        .header span{background:#009688;margin-left:30px;padding:10px;color:#ffffff;}-->
<!--        .header div{border-bottom:solid 2px #009688;margin-top: 8px;}-->
<!--        .header button{float:right;margin-top:-5px;}-->
<!--          .add-rule{-->
<!--            /*background:red;margin-right:30px;padding:10px;color:#ffffff;*/-->
<!--              border-bottom:solid 2px #009688;margin-top: 8px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body style="padding:10px; box-sizing: border-box;">-->
<!--<div class="header">-->
<!--    <span>菜单规则</span>-->
<!--    <span class="add-rule"> 添加规则</span>-->
<!--    <div></div>-->
<!--</div>-->
<!--<table class="layui-table">-->
<!--    <thead>-->
<!--    <tr>-->
<!--        <th></th>-->
<!--        <th>id</th>-->
<!--        <th>标题</th>-->
<!--        <th>图标</th>-->
<!--        <th>规则</th>-->
<!--        <th>权重</th>-->
<!--        <th>状态</th>-->
<!--        <th>操作</th>-->
<!--    </tr>-->
<!--    </thead>-->
<!--    <tbody>-->
<!--    <tr>-->
<!--        <th></th>-->
<!--        <td>1</td>-->
<!--        <td>超级管理员</td>-->
<!--        <td>admin</td>-->
<!--        <td>33</td>-->
<!--        <td>0</td>-->
<!--        <td>开启</td>-->
<!--        <td>11</td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--        <th></th>-->
<!--        <td>1</td>-->
<!--        <td>欧阳克</td>-->
<!--        <td>ouyangke</td>-->
<!--        <td>12</td>-->
<!--        <td>23</td>-->
<!--        <td>开启</td>-->
<!--        <td>11</td>-->
<!--    </tr>-->
<!--    <tr>-->
<!--        <th></th>-->
<!--        <td>1</td>-->
<!--        <td>天蓬</td>-->
<!--        <td>11</td>-->
<!--        <td>11</td>-->
<!--        <td>11</td>-->
<!--        <td>开启</td>-->
<!--        <td>11</td>-->
<!--    </tr>-->
<!--    </tbody>-->
<!--</table>-->
<!--</body>-->
<!--<script>-->
<!--    //权限树-->
<!--</script>-->
<!--</html>-->

